<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>AJAX</title>
	<script src="../jquery/jquery-3.3.1.js"></script>
</head>
<body>
	<div id="test-ajax">
		<h1>接受ajax数据</h1>
		<p id="rec-ajax"></p>
	</div>
<script>
	//使用ajax来发送ajax请求，可以极大的简化程序,而且可以屏蔽浏览器的差异性
	/**
	 * AJAX:
	 * jQuery在全局对象jQuery(也就是$),绑定了ajax()函数,可以处理ajax请求
	 * ajax(url,settings)函数接受一个URL和一个可选的setting对象,常用的选项如下
	 * async:是否异步执行AJAX请求，默认为true,不要指定为false.
	 * method:默认为get,可指定为post,get
	 * content-type:发送post的请求格式默认值为 'application/x-www-form-urlencoded;charset=UTF-8'
	 * 也可以指定为text/plain,application/json
	 * data:发送的数据，可以是字符串，数组，Object,如果是get请求,data将被转换成query附加在url上,
	 * 如果是POST请求,根据content-type 把data转化成合适的格式
	 * headers:发送额外的HTTP头，必须是一个object
	 * dataType:接受的数据格式,可以指定为html,xml,json,text;
	 *
	 */
	function ajaxLog(s) {
		let text = $("#rec-ajax");
		text.val(text.val() + "\n" + s);
	}
	let jaxhr = $.ajax('https://www.liaoxuefeng.com/api/categories',{
		method:"POST",
		dataType:"JSON"
	}).done(function (data) {
		ajaxLog("成功,接受到数据:" + JSON.stringify(data));
	}).fail(function (xhr,status) {
		ajaxLog("失败:" + xhr.status + ",原因:" + status);
	}).always(function () {
		ajaxLog("请求完成:无论成功或者失败都会调用!");
	})
</script>
</body>
</html>